<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery 鼠标事件示例2-3</title>
		<style>
			p{
				width:200px;
				height:200px;
				border:1px solid;
				text-align:center;
			}
		</style>
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>	
			$(document).ready(function(){	
				//触发段落元素<p>的mouseenter()事件	
				$("p").mouseenter(function(){
					//更新提示语句
					$("#tip").text("鼠标已进入");
					//将段落元素背景色更新为红色
					$("p").css("backgroundColor","red");  
			 	}); 
				
				//触发段落元素<p>的mouseleave()事件	
				$("p").mouseleave(function(){
					//更新提示语句
					$("#tip").text("鼠标已离开");
					//将段落元素背景色更新为浅蓝色
					$("p").css("backgroundColor","lightblue");
			 	});
			});
        </script>  
    </head>
    <body>
        <h3>jQuery 鼠标事件mouseenter()与mouseleave()示例</h3>
        <hr>
		<p>
			当前状态：<span id="tip">尚未开始</span>
		</p>
	</body>
</html>